<template>
	<view class="popup">
		<view :class="['popup-content',aniclose?'aniclose':'',   isShowPop? 'up':'']">
			<view class="">
				<uni-icons type="closeempty" size="20" style="opacity: 0;" class="close2"
					color="rgba(165, 165, 165, 1)"></uni-icons> 正式权益体验 <uni-icons class="close" type="closeempty"
					size="20" color="rgba(165, 165, 165, 1)" @click="close"></uni-icons>
			</view>
			<view class=""> 您的正式零工权益还有 </view>
			<view class=""> 7 天到期 </view>
			<view class="">
				<block v-for="({title, content},i) in list" :key="i">
					<view class="title">
						{{title}}
					</view>
					<view class="content">
						{{content}}
					</view>
				</block>
			</view>
			<view class="">
				<view @click='tonext'> 没太理解，客服帮助</view>
				<view @click="close"> 我知道了 </view>
			</view>
		</view>
	</view>
</template>
<script>
	export default ({
		props: {
			isShowPop: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				list: [{
					title: '正式权益体验是什么？',
					content: '蜜蜂日结将赠送您一周正式零工身份。在体验周期里，将享受正式零工权益，体验到期恢复试用零工身份。'
				}, {
					title: '正式体验中的可以做正式晋升任务吗？',
					content: '体验中不可做正式晋升任务，您在体验周期的完成单数会记录在原有身份（试用零工）的晋升任务中。体验到期后数据实时生效。'
				}, {
					title: '正式体验中的可以购买工装吗？',
					content: '体验中可以购买工装。您在体验周期的购买工装行为会记录在原有身份（试用零工）在晋升任务中。体验到期后，记录实时生效。'
				}],
				aniclose: false
			}
		},
		methods: {
			close() {
				this.aniclose = true
				setTimeout(() => {
					this.$emit('popClose')
					this.aniclose = false
				}, 300)
			},
			// 联系客服
			tonext() {
				this.close()
				uni.navigateTo({
					url: '/pages/onLinePage/kefu?userId=' + uni.getStorageSync('userInfo').userId
				})
			},
		}
	})
</script>
<style lang="scss" n>
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vh;
		background: rgba(0, 0, 0, 0.1);
		z-index: 999999;
		pointer-events: auto;
		display: flex;

		&-content {
			width: 100vw;
			height: 1030rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			opacity: 1;
			align-self: flex-end;
			display: flex;
			flex-direction: column;
			align-items: center;

			&>view:nth-child(1) {
				font-size: 36rpx;
				font-weight: 800;
				color: #262626;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 44rpx;

				.close {
					margin-right: 44rpx;
				}

				.close2 {
					margin-left: 44rpx;
				}
			}

			&>view:nth-child(2) {
				margin-top: 10rpx;
				color: #FF851D;
				font-size: 28rpx;
			}

			&>view:nth-child(3) {
				margin-top: 6rpx;
				color: #FF851D;
				font-size: 28rpx;
			}

			&>view:nth-child(4) {
				width: 694rpx;
				margin-top: 70rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #262626;
					margin-bottom: 20rpx;
				}

				.content {
					font-size: 28rpx;
					font-weight: 400;
					color: #515151;
					margin-bottom: 50rpx;
				}
			}

			&>view:nth-child(5) {
				display: flex;
				justify-content: space-between;
				width: 694rpx;

				&>view {
					width: 327rpx;
					height: 88rpx;
					border-radius: 12rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&>view:nth-child(1) {
					font-size: 32rpx;
					color: #515151;
					border: 2rpx solid #7F7F7F;
					background: #fff;
				}

				&>view:nth-child(2) {
					font-size: 36rpx;
					color: #262626;
					font-weight: bold;
					background: #FCC928;
					box-shadow: 2rpx 12rpx 24rpx 2rpx rgba(252, 201, 40, 0.4);
					border: 2rpx solid #FCC928;
				}
			}
		}
	}

	@keyframes toUp {
		0% {
			transform: translateY(1000rpx);
		}

		100% {
			transform: translateY(0);
		}
	}

	@keyframes close {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(1000rpx);
		}
	}

	.up {
		animation: toUp 0.3s ease-out 0s 1;
	}

	.aniclose {
		animation: close 0.3s linear 0s;
	}
</style>